<template>
	<view class="withdraw_deposit">
		<view class="top-content">
			<view class="title">提现金额</view>
			<view class="input">
				<view class="unit">￥</view>
				<input type="text" v-model="form.money" :placeholder="`余额${money}元`">
				<view class="text" @click="form.money = money">
					全部提现
				</view>
			</view>
			<view class="desc">收取{{ withdraw_rate }}%手续费(每天可提现一次)</view>
		</view>
		<view class="content">
			<view class="title">提现方式</view>
			<view class="line">
				<view class="label">姓名</view>
				<input v-model="form.wx_name" type="text" placeholder="请输入收款人姓名">
			</view>
			<view class="code">
				<Upload :customStyle="3" :url="form.wx_payment_img" @change="form.wx_payment_img = $event" />
			</view>
			<up-button @click="handleClick" type="primary" text="确认提现"></up-button>
		</view>
	</view>
</template>

<script setup>
	import Upload from '@/components/Upload.vue'
	import { ref } from 'vue'
	import user from '@/api/user.js'
	import utils from '@/utils/util.js'
	const money = uni.getStorageSync('userInfo')?.money
	const withdraw_rate = uni.getStorageSync('userInfo')?.withdraw_rate
	const form = ref({
		money: '',
		wx_name: '',
		wx_payment_img: ''
	})
	const handleClick = async () => {
		const { status, info, data } = await user.applyWithdrawal(form.value)
		utils.toast(info)
		if(status == 1) {
			form.value.money = ''
		}
	}
</script>

<style lang="scss" scoped>
	.withdraw_deposit {
		.top-content,
		.content {
			margin: 20rpx 0;
			background-color: #fff;
			padding: 26rpx;
			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #2C1F21;
				line-height: 39rpx;
				margin-bottom: 30rpx;
			}
			.input {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #F3F3F3;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				.unit {
					width: 60rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 60rpx;
					color: #333333;
					line-height: 84rpx;
				}
				.text{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #F1692B;
					line-height: 39rpx;
					width: 120rpx;
				}
				input {
					margin: 0 20rpx;
					width: calc(100% - 220rpx);
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 36rpx;
					line-height: 50rpx;
				}
			}
			.desc {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #AEAEAE;
				line-height: 34rpx;
			}
			.code {
				width: 310rpx;
				height: 310rpx;
				margin: 40rpx auto;
			}
			.line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F3F3F3;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				.label {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #2C1F21;
					line-height: 34rpx;
				}
				input {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 34rpx;
					text-align: right;
				}
			}
		}
	}
</style>